<template>
  <div>
    <TableHead />
    <a-card v-if="table.data.length > 0" :bordered="false" class="mt-2" :loading="table.loading">
      <ul class="w-full grid grid-cols-3 lg:grid-cols-6 gap-[12px]">
        <li
          v-for="(item, key) in table.data"
          :key="key"
          class="h-full card w-full"
          @click="selectTheme(item)"
        >
          <a-card>
            <template #cover>
              <img
                v-if="item.items[0].background"
                style="object-fit: contain"
                :height="120"
                :src="item.items[0].background"
              />
              <a-empty v-else style="height: 120px" />
            </template>
            <a-card-meta :title="item.name">
              <template #description>
                <div @click.stop="copy(item.groupsId)"><IconCopy />{{ item.groupsId }}</div>
              </template>
            </a-card-meta>

            <template #actions>
              <a-button @click.stop="use(item)"> {{ t["使用"] }}</a-button>

              <template v-if="query.scope === ENUM_DATA_SCOPE.THIS_SHOP">
                <a-button-group>
                  <a-button @click.stop="del(item)">
                    <IconDelete />
                  </a-button>
                  <a-button @click.stop="selectTheme(item)">
                    <IconEdit />
                  </a-button>
                  <a-dropdown @click.stop>
                    <a-button>
                      <IconDown></IconDown>
                    </a-button>
                    <template #content>
                      <a-doption @click="priorityTheme(item)"> {{ t["默认主题"] }} </a-doption>
                      <a-doption @click="create(item)"> {{ t["新增"] }} </a-doption>
                      <a-doption @click="defaultTheme(item)">
                        {{ t["解绑主题"] }}
                        <IconUnlock />
                      </a-doption>
                    </template>
                  </a-dropdown>
                </a-button-group>
              </template>
              <template v-else>
                <a-button @click.stop="favorite(item)"> {{ t["收藏"] }}</a-button>
              </template>
            </template>
          </a-card>
        </li>
      </ul>
    </a-card>
    <a-empty v-else />
    <Group v-if="currentTheme" v-model:visible="visible" :data="currentTheme"></Group>
    <!-- <SelectDeviceGroup
      v-if="currentTheme"
      v-model="deviceModal"
      :theme-id="currentTheme?.groupsId"
    ></SelectDeviceGroup> -->
    <a-modal v-model:visible="modalVisible" :footer="false">
      <a-form layout="vertical" :model="form" @submit-success="submit">
        <a-form-item field="name" required :label="t['重命名']">
          <a-input v-model="form.name"></a-input>
        </a-form-item>
        <a-button type="primary" html-type="submit">{{ t["确定"] }}</a-button>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { copyTheme, delThemeGroup, priority, themeFunc } from "@/api/service/theme/theme";
import { LcdGroup } from "@/api/service/theme/types";
import { ENUM_DATA_SCOPE } from "@/enum/system.enum";
import { Message, Modal } from "@arco-design/web-vue";

import { copyText } from "@/utils/utils";
import { list } from "../data/curd";
import { showForm, themForm } from "../data/form";
import { query, table } from "../data/table";
import Group from "./Group.vue";
import TableHead from "./TableHead.vue";

import router from "@/router";
const form = ref({
  name: "",
  id: []
});
const modalVisible = ref(false);
const currentTheme = ref<LcdGroup>();
const t = translate("公共模块");
const visible = ref(false);

onMounted(async () => {
  await list();
});
const defaultTheme = async (item: LcdGroup) => {
  const { msg } = await themeFunc(item.groupsId);
  Message.info(msg);
};
const priorityTheme = async (item: LcdGroup) => {
  const { msg } = await priority(item.groupsId);
  Message.info(msg);
};
const copy = (id: string) => {
  copyText(id);
  Message.success(`Success`);
};
const use = (item: LcdGroup) => {
  currentTheme.value = item;
  router.push({
    name: "sendBySkin",
    query: {
      groupsId: item.groupsId
    }
  });
};
const create = (item: LcdGroup) => {
  themForm.value.groupsId = item.groupsId;
  const { width, height, category, scale, share } = item.items[0];
  themForm.value.width = width;
  themForm.value.height = height;
  themForm.value.share = share;
  themForm.value.category = category;
  themForm.value.scale = scale;
  showForm.value = true;
};
const del = (item: LcdGroup) => {
  Modal.info({
    title: t.value?.["警告"],
    async onOk() {
      await delThemeGroup(item.groupsId);
      list();
    },
    content: t.value?.["是否执行操作"],
    okText: "Ok",
    cancelText: "Cancel"
  });
};
const selectTheme = (item: LcdGroup) => {
  visible.value = true;
  currentTheme.value = item;
};
const favorite = (item: LcdGroup) => {
  modalVisible.value = true;
  currentTheme.value = item;
};
const submit = async () => {
  await copyTheme({
    rename: form.value.name,
    copyList: [currentTheme.value?.groupsId || ""]
  });
  form.value.name = "";
  modalVisible.value = false;
};
</script>

<style lang="scss" scoped>
.card {
  height: fit-content;
}
</style>
